<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>趋势雷达 - Shioa</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eff6ff',
                            100: '#dbeafe', 
                            200: '#bfdbfe',
                            300: '#93c5fd',
                            400: '#60a5fa',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                            800: '#1e40af',
                            900: '#1e3a8a'
                        },
                        secondary: '#64748b',
                        accent: {
                            green: '#10b981',
                            purple: '#8b5cf6',
                            orange: '#f59e0b',
                            red: '#ef4444',
                            blue: '#06b6d4'
                        },
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                        info: '#06b6d4'
                    },
                    borderRadius: {
                        'button': '8px'
                    },
                    fontFamily: {
                        'sans': ['Inter', 'ui-sans-serif', 'system-ui']
                    },
                    boxShadow: {
                        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
                        'medium': '0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.04)',
                        'strong': '0 10px 40px -10px rgba(0, 0, 0, 0.1), 0 2px 10px -2px rgba(0, 0, 0, 0.04)'
                    }
                }
            }
        }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            min-height: 1024px;
        }
        .toast-container { 
            position: fixed; 
            top: 1rem; 
            right: 1rem; 
            z-index: 9999; 
        }
        .status-bar { 
            position: fixed; 
            top: 0; 
            left: 0; 
            right: 0; 
            z-index: 50; 
        }
        
        /* 三栏布局 */
        .three-panel-layout {
            display: grid;
            grid-template-columns: 250px 300px 1fr;
            height: calc(100vh - 120px);
            gap: 1rem;
        }
        
        /* 左侧分类导航 */
        .category-nav {
            background: white;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            padding: 1rem;
            overflow-y: auto;
        }
        
        .category-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            margin-bottom: 0.5rem;
            border-radius: 8px;
            color: #374151;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }
        
        .category-item:hover {
            background: #f8fafc;
            color: #1f2937;
            transform: translateX(4px);
            border-color: #e2e8f0;
        }
        
        .category-item.active {
            background: #dbeafe;
            color: #1e40af;
            font-weight: 500;
            border-color: #3b82f6;
        }
        
        .category-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 中间榜单列表 */
        .trending-list {
            background: white;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            overflow: hidden;
        }
        
        .trending-list-header {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            padding: 1rem;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .trending-list-content {
            height: calc(100% - 70px);
            overflow-y: auto;
            padding: 0.5rem;
        }
        
        .trending-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            margin-bottom: 0.25rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }
        
        .trending-item:hover {
            background: #f8fafc;
            border-color: #e2e8f0;
            transform: translateY(-1px);
        }
        
        .trending-item.active {
            background: #dbeafe;
            border-color: #3b82f6;
        }
        
        .trending-logo {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            color: white;
        }
        
        /* 右侧详情面板 */
        .detail-panel {
            background: white;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            overflow: hidden;
        }
        
        .detail-header {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            padding: 1rem;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .detail-content {
            height: calc(100% - 70px);
            overflow-y: auto;
            padding: 1rem;
        }
        
        .trending-rank-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 1rem;
            margin-bottom: 0.5rem;
            border-radius: 8px;
            border: 1px solid #f1f5f9;
            transition: all 0.2s ease;
            cursor: pointer;
        }
        
        .trending-rank-item:hover {
            border-color: #e2e8f0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            background-color: #f8fafc;
            transform: translateX(2px);
        }
        
        .rank-number {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
            flex-shrink: 0;
        }
        
        .rank-number.top3 {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            color: white;
        }
        
        .rank-number.top10 {
            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
            color: white;
        }
        
        .rank-number.normal {
            background: #f1f5f9;
            color: #6b7280;
        }
        
        .hot-score {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
            color: #dc2626;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 500;
        }
        
        /* 骨架屏 */
        .skeleton {
            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }
        
        @keyframes skeleton-loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        .skeleton-item {
            height: 60px;
            border-radius: 8px;
            margin-bottom: 0.5rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 1024px) {
            .three-panel-layout {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto 1fr;
                height: auto;
            }
            
            .category-nav {
                background: white;
                border: 1px solid #e5e7eb;
                padding: 1rem;
            }
            
            .category-nav .category-item {
                color: #374151;
                background: #f9fafb;
                border: 1px solid #e5e7eb;
            }
            
            .category-nav .category-item:hover {
                background: #f3f4f6;
            }
            
            .category-nav .category-item.active {
                background: #dbeafe;
                color: #1e40af;
            }
        }
        
        /* 平台品牌色 */
        .baidu { background: linear-gradient(135deg, #3385ff 0%, #4facfe 100%); }
        .weibo { background: linear-gradient(135deg, #e60012 0%, #ff6b35 100%); }
        .douyin { background: linear-gradient(135deg, #000000 0%, #434343 100%); }
        .bilibili { background: linear-gradient(135deg, #00a1d6 0%, #00b5cc 100%); }
        .zhihu { background: linear-gradient(135deg, #0084ff 0%, #0066cc 100%); }
        .github { background: linear-gradient(135deg, #24292e 0%, #586069 100%); }
        .youtube { background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%); }
        .tencent { background: linear-gradient(135deg, #1aad19 0%, #00d4aa 100%); }
        .default { background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%); }
    </style>
</head>
<body class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 min-h-screen font-sans">
    <!-- 状态提示栏 -->
    <div id="status-bar" class="hidden status-bar bg-blue-500 text-white p-3 text-center">
        <div class="flex items-center justify-center">
            <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
            <span id="status-text">正在加载...</span>
        </div>
    </div>

    <!-- Toast 容器 -->
    <div id="toast-container" class="toast-container space-y-2"></div>

    <!-- 导航由 shared-navigation.js 统一管理，实现真正的组件复用 -->

    <!-- 面包屑导航 -->
    <div class="max-w-[1440px] mx-auto px-6 py-4">
        <nav class="flex items-center gap-2 text-sm text-gray-500">
            <a href="index.html" class="hover:text-primary-600 transition-colors">
                <i class="fas fa-home"></i>
            </a>
            <span class="mx-2">/</span>
            <span class="text-gray-700">趋势雷达</span>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <main class="max-w-[1440px] mx-auto px-6 pb-8">
        <!-- 三栏布局 -->
        <div class="three-panel-layout">
            <!-- 第一栏：分类导航 -->
            <div class="category-nav">
                <h3 class="text-gray-800 text-sm font-semibold mb-4 px-4">热榜分类</h3>
                <div id="category-list">
                    <!-- 分类项将动态生成 -->
                </div>
            </div>
            
            <!-- 第二栏：榜单列表 -->
            <div class="trending-list">
                <div class="trending-list-header">
                    <div class="flex items-center justify-between">
                        <h3 class="text-gray-800 font-semibold">选择热榜</h3>
                        <span id="trending-count" class="text-sm text-gray-500">0个榜单</span>
                    </div>
                </div>
                <div class="trending-list-content">
                    <div id="trending-list">
                        <!-- 榜单列表将动态生成 -->
                        <div class="flex flex-col items-center justify-center py-12">
                            <i class="fas fa-hand-point-left text-4xl text-gray-300 mb-4"></i>
                            <p class="text-gray-500">请选择左侧分类</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 第三栏：热榜详情 -->
            <div class="detail-panel">
                <div class="detail-header">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 id="detail-title" class="text-gray-800 font-semibold">热榜详情</h3>
                            <p id="detail-subtitle" class="text-sm text-gray-500">选择榜单查看详情</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <span id="update-time" class="text-xs text-gray-400"></span>
                            <button onclick="refreshCurrentTrending()" class="p-1 text-gray-400 hover:text-gray-600 transition-colors" title="刷新">
                                <i class="fas fa-sync-alt text-sm"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="detail-content">
                    <div id="detail-content">
                        <!-- 详情内容将动态生成 -->
                        <div class="flex flex-col items-center justify-center py-12">
                            <i class="fas fa-chart-line text-4xl text-gray-300 mb-4"></i>
                            <p class="text-gray-500 text-center">选择热榜查看实时数据<br>发现最新趋势</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- JavaScript -->
    <script src="js/env.js"></script>
    <script>
    // 设置全局API配置
    window.API_BASE_URL = API_BASE_URL;
    </script>
    <script src="js/config.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/api.js"></script>
    <script src="js/trending-radar.js"></script>
    <script src="js/shared-navigation.js"></script>
</body>
</html>